// 首页的样式less文件，将刚才设置好的common.less
// 引入到suning.less里面
// @import导入的意思，可以把一个样式文件导入
// 到另外一个样式文件里面
// link是把一个样式文件引入到html页面里面
@import "common";
body{
    min-width: 320px;
    // 用rem好调整页面大小的变化 我们此次划定为15个单位为宽度 以750px的字体大小为50px为例子当然随着页面的变动css也在生效字体就在变动
    width: 15rem;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    background: #f2f2f2;
}
// 页面元素rem计算公式：页面元素的px（单位改为rem）/html字体大小50
@baseFont:50;
.search-content{
    display: flex;
    position: fixed;
    // 定位的盒子千万不能用margin来改变
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    // 实现了居中，上面两个公式
    // 固定定位必须有宽度
    width: 15rem;
    height: (88rem / @baseFont);
    background-color: #ffc001;
    .classify{
        width: (44rem / @baseFont);
        height: (70rem / @baseFont);
        // background-color: #bfa;
        margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
        background: url(./suning.img/fenlei.png) no-repeat; 
        // 当前级别就是./
        // 背景缩放用backgroung-size
        background-size: (44rem / @baseFont) (70rem / @baseFont);
    }
    .search{
        flex: 1;
        // 剩余内容作为1份全给中间
        // background-color: purple;
        input{
            outline: none;
            // outline：none 外边轮廓焦点默认none
            height: (66rem / @baseFont);
            border-radius: (33rem / @baseFont);
            // input将登录盒子挤出来了，可以给input加个wid100% 
            // 行内块不能自适应
            width: 100%;
            background-color: #fff2cc;
            border: 0;
            margin-top: (12rem / @baseFont);
            font-size: (25rem / @baseFont);
            // 内边距调整文字距离
            padding-left: (55rem /@baseFont);
            color: #757575;
        }
    }
    .login{
          width: (75rem / @baseFont);
          height: (70rem / @baseFont);
          line-height: (70rem / @baseFont);
        //   background-color: aqua;
          margin: (10rem / @baseFont);
          font-size:(25rem / @baseFont);
          text-align: center;
          color: #fff;
    }
}
.banner{
    width: (750rem / @baseFont);
    height: (368rem / @baseFont);
    img{
        width: 100%;
        height: 100%;
    }
}
.ad{
    display: flex;
    a{
        flex: 1;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
// nav
nav{
    width: (750rem / @baseFont);
    a{
        float: left;
        width: (150rem / @baseFont);
        height: (140rem / @baseFont);
        text-align: center;
        img{
            display: block;
            width: (82rem / @baseFont);
            height: (82rem / @baseFont);
            margin: (10rem / @baseFont) auto 0;
        }
        span{
            font-size: (25rem / @baseFont);
            color: #333;
        }
    }
}
// ------------------------------------------------
// 上述适配方案1 less媒体查询rem
 


